import React, { Component } from 'react';
import {Platform, StyleSheet, Text, View, TouchableOpacity, FlatList, ActivityIndicator} from 'react-native';
import {API} from "../../../api";
import { base } from "../../../assets/style";
import {i18n} from "../../../utils/locales/i18n";
import { getUserInfoStorage } from "../../../utils/login";

type Props = {};
export default class List extends Component<Props> {
	static navigationOptions = {
		// title: 'FCC(HKD)',
		header: null
	}
	constructor() {
		super()
		this.state = {
			loading: false,
			listData: {},
			username: '',
			isRefresh: false
		}
	}
	componentDidMount(): void {
		const reqData = {
			type: this.props.type,
			sellToken: this.props.sellToken,
			buyToken: this.props.buyToken
		}
		this._initList(reqData)
		this.getUsername()
	}
	getUsername = async () => {
		const data = await getUserInfoStorage()
		this.setState({
			username: data.Username
		})
	}
	// 初始化买币/卖币列表数据
	_initList = async (reqData) => {
		this.setState({
			loading: true
		})
		const res = await API.getAdList(reqData)
		this.setState({
			loading: false
		})
		// code: 10000
		// data: Array(1)
		// 0:
			// AdUsername: "username"
			// BankNumber: "6228481178256941173"
			// BuyToken: "hkd"
			// Freeze: 500
			// Id: 29
			// Max: 1000
			// Min: 10
			// SellToken: "fcc"
			// TxFail: 0
			// TxSuc: 4
			// Type: 2
			// Uid: 11
			// Unit: 2
		const listData = []
		if (res && res.data && res.data.length > 0) {
			res.data.map(item => {
				const {
					AdUsername,
					BankNumber,
					BuyToken,
					Freeze,
					Id,
					Max,
					Min,
					SellToken,
					TxFail,
					TxSuc,
					Type,
					Uid,
					Unit
				} = item
				listData.push({
					key: Id + '',
					type: Type,
					id: Id,
					BuyToken,
					SellToken,
					name: AdUsername,
					txSum: TxSuc,
					txRate: ((Number(TxSuc) / (Number(TxSuc) + Number(TxFail)) * 100) ? (Number(TxSuc) / (Number(TxSuc) + Number(TxFail)) * 100) : 0).toFixed(2) + '%',
					min: Min,
					max: Max,
					price: Unit
				})
			})
			listData.push({
				key: 'k',
				type: 0,
				text: i18n.t('i142')
			})
		} else {
			// 没有数据
			listData.push({
				key: 'no-data',
				text: i18n.t('i143'),
				type: 3
			})
		}
		this.setState({
			listData
		})
	}
	_onRefresh = async () => {
		if (!this.state.isRefresh) {
			const reqData = {
				type: this.props.type,
				sellToken: this.props.sellToken,
				buyToken: this.props.buyToken
			}
			await this._initList(reqData)
		}
	}
	dispatchOrder = (item) => {
		if (this.props.type === 1) {
			// 购买
			this.props.toBuy(item)
		} else {
			// 出售
			this.props.toSell(item)
		}
	}

	render() {
		return (
			<View style={styles.container}>
				{ this.state.loading ? (
					<View style={[base.flex_1, base.flex_col_center, base.bg_white]}>
						<ActivityIndicator size="large" color="#ff7606" />
						<View style={{paddingTop: 15}}>
							<Text style={[base.color_orange]}>{ i18n.t('loading') }</Text>
						</View>
					</View>
				) : (
					<FlatList
						data={this.state.listData}
						onRefresh={() => this._onRefresh()}
						refreshing={this.state.isRefresh}
						renderItem={
							({item}) => {
								if (item.type === 0) {
									// 到底了
									return (
										<View style={{height: 50, width: '100%', backgroundColor: '#fff', justifyContent: 'center', alignItems: 'center'}}>
											<Text style={{color: '#808080'}}>{item.text}</Text>
										</View>
									)
								} else if (item.type === 3) {
									// 暂无数据
									return (
										<View style={{height: 50, width: '100%', backgroundColor: '#fff', justifyContent: 'center', alignItems: 'center'}}>
											<Text style={{color: '#808080'}}>{item.text}</Text>
										</View>
									)
								}
								return (
									<View style={styles.itemContainer}>
										<View style={{flex: 1}}>
											<View style={{height: 30, flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center'}}>
												<Text style={{fontSize: 20}}>{item.name}</Text>
												<View style={{borderWidth: 1, borderColor: '#68cf6f', backgroundColor: '#68cf6f', paddingVertical: 3, paddingHorizontal: 5, marginLeft: 10}}>
													<Text style={{color: '#fff', fontSize: 12}}>{i18n.t('i122')}</Text>
												</View>
											</View>
											<View style={{flex: 1, justifyContent: 'space-around', paddingVertical: 5, alignItems: 'flex-start'}}>
												<Text style={{fontSize: 13, color: '#808080'}}>{ i18n.t('i89') } {item.txSum} | { i18n.t('i90') } {item.txRate} </Text>
												<Text style={{fontSize: 13, color: '#808080'}}>{ i18n.t('i88') }：{item.min} - {item.max} {this.props.sellToken.toUpperCase()}</Text>
											</View>
										</View>
										<View style={{width: '30%'}}>
											<View style={[base.flex_row_end, {height: 30, width: '100%'}]}>
												{/*<Text style={{flex:1, textAlign: 'right', lineHeight: 30, fontSize: 16}}>{item.price} { this.props.sellToken.toUpperCase() }</Text>*/}
												<Text style={{flex:1, textAlign: 'right', lineHeight: 30, fontSize: 16}}>{item.price} <Text style={{fontSize: 14}}>FCC/HKD</Text></Text>
											</View>
											<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
												{ this.state.username !== item.name ? (
													<TouchableOpacity onPress={() => this.dispatchOrder(item)} style={{flex: 1, width: '100%', justifyContent: 'center', alignItems: 'flex-end'}}>
														<View style={{width: '80%', height: 28, justifyContent: 'center', alignItems: 'center', backgroundColor: '#ff7706', borderRadius: 6}}>
															<Text style={{color: '#fff', fontSize: 14}}>{ this.props.type === 1 ? i18n.t('i118') : i18n.t('i82')}</Text>
														</View>
													</TouchableOpacity>
												) : (
													<TouchableOpacity style={{flex: 1, width: '100%', justifyContent: 'center', alignItems: 'flex-end'}}>
														<View style={{width: '80%', height: 28, justifyContent: 'center', alignItems: 'center', backgroundColor: '#ff7706', borderRadius: 6}}>
															<Text style={{color: '#fff', fontSize: 14}}>{i18n.t('i224')}</Text>
														</View>
													</TouchableOpacity>
												) }

											</View>
										</View>
									</View>
								)
							}
						}
					/>
				)}
			</View>
		);
	}
}

const styles = StyleSheet.create({
	container: {
		// backgroundColor: '#ff8',
		backgroundColor: '#f2f2f2',
		flex: 1
	},
	itemContainer: {
		fontSize: 20,
		height: 100,
		borderBottomWidth: 1,
		borderBottomColor: '#eee',
		padding: 10,
		flexDirection: 'row',
		backgroundColor: '#fff'
	},
	itemText: {
		color: '#808080'
	}
});
